
import axios from "../axios";
import "../assets/css/login.scss"
import { Button, Checkbox, Form, Input } from 'antd';
import { LockOutlined, UserOutlined,UnlockOutlined,SecurityScanOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom';
import { Col, Row } from 'antd';
import leftImg from "../assets/image/1.png"
function Login() {
    let navgate = useNavigate()
    const [name, setName] = useState("demo")
    const [password, setPassword] = useState("crmeb.com")
    const [code, setCode] = useState("")//验证码

    const [pic, setPic] = useState("")//验证码图片路径
    const [secretObj, setSecretObj] = useState({ secretKey: "", token: "" })
    const [key, setKey] = useState("")
    //验证码图片 和 key
    const getCode = async () => {
        let { code, key } = await axios.get("/validate/code/get", {
            params: {
                temp: new Date().getTime()
            }
        })
        setPic(code)
        setKey(key)
    }
    // secretKey   token
    const getData = async () => {
        let res = await axios.post("https://api.java.crmeb.net/captcha/get", {
            "captchaType": "blockPuzzle",
            "clientUid": "slider-f563f6ce-d5b9-4ad7-8806-729e3df35ba8",
            "ts": new Date().getTime()
        })
        // console.log(res.repData.secretKey,res.repData.token);
        setSecretObj({ secretKey: res.repData.secretKey, token: res.repData.token })

    }
    // getKey

    const Login = async () => {//登录请求
        let { token } = await axios.post("/login",
            {
                "account": name,// 用户名
                "pwd": password,//密码
                "code": code,//验证码
                "key": key,//get？temp=时间戳
                "captcha": {
                    "captchaVerification": "",
                    "secretKey": secretObj.secretKey,// get接口
                    "token": secretObj.token//get接口
                }
            }
        )
        console.log(token);
        localStorage.setItem("token", token)//存token
        navgate("/") //登录成功跳转首页 
    }

    useEffect(() => {
        getCode()
        getData()

    }, [])


    const onFinish = (values) => {
        console.log('成功:', values);
        Login()
    };
    const onFinishFailed = (errorInfo) => {
        console.log('失败:', errorInfo);
    };
    return (
        <div className="bigdiv">

            <div className="bigBox">
                <Row>
                    <Col span={10}>
                    <img className="logimg" src={leftImg} alt="" />
                    </Col>
                    <Col span={14}>
                        <Form
                            name="basic"
                            labelCol={{
                                span: 8,
                            }}
                            wrapperCol={{
                                span: 16,
                            }}
                            style={{
                                maxWidth: 600,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="用户名"
                                initialValue={name}
                                name="username"

                              
                                rules={[
                                    {
                                        required: true,
                                        message: '输入用户名!',
                                    },
                                ]}
                            >
                                <Input   prefix={<UserOutlined />} value={name} onChange={(e) => setName(e.target.value)} />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                initialValue={password}
                                name="password"

                                rules={[
                                    {
                                        required: true,
                                        message: '输入密码!',
                                    },
                                ]}
                            >
                                <Input.Password prefix={<UnlockOutlined />} onChange={(e) => setPassword(e.target.value)} value={password} />
                            </Form.Item>



                            <Form.Item label="验证码"  >
                                <Row gutter={8}>
                                    <Col span={12}>
                                        <Form.Item
                                            name="captcha"
                                            
                                            // rules={[
                                            //     {
                                            //         required: true,
                                            //         message: '输入验证码!',
                                            //     },
                                            // ]}

                                        >
                                            <Input prefix={<SecurityScanOutlined />} onChange={(e) => setCode(e.target.value)} />
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <img  onClick={() => getCode()} src={pic} alt="" />

                                    </Col>
                                </Row>
                            </Form.Item>

                            

                            <Form.Item
                                wrapperCol={{
                                    offset: 6,
                                    span: 16,
                                }}
                            >
                                <Button block type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                            
                        </Form>

                       
                    </Col>
                </Row>
            </div>
        </div>
    );
}

export default Login;